<template>
  <div>
    <van-popup v-model="searchShow" position="bottom" class="popup" @close="cancel">
      <van-sticky offset-top="0">
        <van-search
          v-model="searchName"
          show-action
          shape="round"
          background="#017bd3"
          :placeholder="searchPlaceholder"
          @search="search"
          @clear="search"
          autofocus
        >
          <template #action>
            <div class="search-btn" @click.stop="search">搜索</div>
          </template>
        </van-search>
      </van-sticky>
      <van-picker value-key="value"
                  show-toolbar
                  toolbar-position="bottom"
                  :columns="searchColumns"
                  @confirm="confirm"
                  @cancel="cancel"
      >
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'SearchPopup',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    searchPlaceholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchName: '',
      searchShow: true,
      searchColumns: []
    }
  },
  mounted() {
    this.searchColumns = [...this.columns]
  },
  methods: {
    search() {
      if (this.searchName.length > 0) {
        this.searchColumns = this.columns.filter(item => item.value.indexOf(this.searchName) != -1)
      } else {
        this.searchColumns = this.columns
      }
    },
    confirm(item) {
      this.$emit('searchConfirm', item)
    },
    cancel() {
      this.$emit('searchClose')
    }
  }
}
</script>

<style scoped>

.search-btn {
  color: white;
  font-size: 15px;
  margin: 0 10px;
}

</style>
